<template>
	<div class="container">
		<el-table
			ref="refHandDataTable"
			:max-height="tableHeight"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			border
			:data="list"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			header-align="center"
			@sort-change="handleDetailTableSort"
		>
			<el-table-column
				type="index"
				:label="`${$t('dxn.game_rule.serial_number')}`"
				width="60"
				align="center"
			/>
			<!-- <el-table-column
				type="index"
				:label="`${$t('dxn.game_rule.serial_number')}`"
				width="60"
				align="center"
			>
				<template slot-scope="scope">
					<span>
						{{
							getParentSerialNum({
								index: scope.$index,
								pageNum: pageNum,
								pageSize: pageSize
							})
						}}
					</span>
				</template>
			</el-table-column> -->
			<el-table-column
				:label="`${$t('dxn.card_ables_list.hand_brand')}`"
				min-width="60"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.handNum || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.game_list.hand_id')}`"
				min-width="190"
				align="center"
			>
				<template slot-scope="scope">
					<div
						v-if="scope.row.handCode"
						class="blueColor decoration"
						@click="
							handleJump({
								path: '/dxn/gameManager/gameList/gameBase',
								query: {
									handId: scope.row.handCode
								}
							})
						"
					>
						{{ scope.row.handCode }}
					</div>
					<div v-else>-</div>
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.handle_start_time')}`"
				min-width="130"
				align="center"
				show-overflow-tooltip
				prop="handBeginTime"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.handBeginTime) || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.handle_end_time')}`"
				min-width="130"
				align="center"
				show-overflow-tooltip
				prop="handEndTime"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.handEndTime) || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.game_list.effective_bottom_pool')}`"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="validPot"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(scope.row.currency, scope.row.validPot)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.game_list.public_brand_information')}`"
				min-width="180"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<template
						v-if="
							!scope.row.publicCards ||
								scope.row.publicCards === '[]'
						"
					>
						-
					</template>
					<template v-else>
						<span
							v-for="(item, index) in getCardsImage(
								scope.row.publicCards
							)"
							:key="index"
						>
							<el-image
								class="hand-card-img"
								:class="{ 'hand-card-space': index === 3 }"
								:src="item"
								fit="contain"
							></el-image>
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column
				:label="`${$t('dxn.card_ables_list.play_cards_pump_water')}`"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="pumpingAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.pumpingAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="经典保险盈亏"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="insuredNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span
						:style="handleNumberColor(scope.row.insuredNetAmount)"
					>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.insuredNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				label="EV保险盈亏"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="evInsuredNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.evInsuredNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				:label="
					`${$t(
						'dxn.card_ables_list.summary_of_member_wins_and_losses'
					)}`
				"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="handNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.handNetAmount)">
						{{
							handleNumber(
								scope.row.currency,
								scope.row.handNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-show="!!total"
			:current-page.sync="pageNum"
			class="pageValue"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="$store.getters.pageSizes"
			:total="total"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { getCardsImgArr } from '@/utils/replay'
export default {
	mixins: [list],
	props: {
		tableHeight: { type: [String, Number], default: 480 },
		queryData: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		activeIdx: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			sortParams: {}
		}
	},
	methods: {
		clearDetailTableSort() {
			this.sortParams = {}
			this.$refs?.refHandDataTable?.clearSort()
		},
		// 列表排序
		handleDetailTableSort({ prop, order }) {
			this.sortParams = {}
			this.sortParams.orderByField = prop
			// 升序
			if (order === 'ascending') {
				this.sortParams.orderByMode = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.sortParams.orderByMode = 'desc'
			} else {
				this.sortParams.orderByField = undefined
				this.sortParams.orderByMode = undefined
			}
			this.loadData()
		},
		getCardsImage(cardsStr) {
			let imageArr = []
			const cardsNumReplaceStr = cardsStr.replace(/[\[\]]/g, '')
			if (cardsNumReplaceStr) {
				imageArr = getCardsImgArr(cardsNumReplaceStr.split(','))
			}
			return imageArr
		},
		loadData() {
			this.list = []
			if (this.queryData.id && Number(this.activeIdx) === 2) {
				let params = {
					tableCode: this.queryData.id,
					...this.sortParams
				}
				params = this.getParams(params)
				this.loading = true
				this.$emit('changeDisabledSearch', true)
				this.$api
					.getDxhandLlistBend(params)
					.then((res) => {
						const { record, totalRecord } = res.data || {}
						this.list = Array.isArray(record) ? record : []
						this.total = totalRecord
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false
						this.$emit('changeDisabledSearch', false)
					})
			}
		},
		// 跳转
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>

<style lang="scss" scoped>
.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.hand-card-img {
	width: 27px;
	height: 36px;
}
.hand-card-space {
	margin-left: 5px;
}
</style>
